﻿<!DOCTYPE html>
<!--日常评估考核管理详细-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

</head>
<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址">
                <template slot-scope="scope">
                    <el-select @visible-change="visibleChange" @change="handleSelect" v-model="scope.row.select.value" placeholder="请选择">
                        <el-option v-for="item in scope.row.select.options" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <script>
        app = new Vue({
            el: '#app',
            data: function () {
                return {
                    tableData: [
                        {
                            date: '2016-05-02',
                            name: '王小虎',
                            select: {
                                options: [
                                    {
                                        value: 0,
                                        label: 'aa'
                                    },
                                    {
                                        value: 1,
                                        label: 'bb'
                                    },
                                    {
                                        value: 2,
                                        label: 'cc'
                                    }, {
                                        value: 3,
                                        label: 'dd'
                                    },
                                    {
                                        value: 4,
                                        label: 'ee'
                                    }
                                ],
                                value: ''
                            }
                        },
                        {
                            date: '2016-05-04',
                            name: '王小虎',
                            select: {
                                options: [
                                    {
                                        value: 5,
                                        label: 'ff'
                                    },
                                    {
                                        value: 6,
                                        label: 'gg'
                                    },
                                    {
                                        value: 7,
                                        label: 'hh'
                                    }, {
                                        value: 8,
                                        label: 'ii'
                                    },
                                    {
                                        value: 9,
                                        label: 'gg'
                                    }
                                ],
                                value: ''
                            }
                        }
                    ]
                };
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                handleSelect(ev) {
                    console.log(ev);
                }
            }
        });
    </script>
</body>
</html>